<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'details.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  <link rel="stylesheet" href="css/currency.css" type="text/css"></link>
  
  <link rel="stylesheet" href="css/details.css" type="text/css"></link>
  
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
  <link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css"></link>
  
  <script type="text/javascript" src="plugins/layui/layui.js"></script>
  
  <link rel="stylesheet" href="plugins/layui/css/layui.css" type="text/css"></link>
  <script type="text/javascript" src="js/jquery-3.2.0.js"></script>
  </head>
  
  <body>
 	 <div style="height: 160px;">
   		<jsp:include page="top.jsp"></jsp:include>
   	</div>
 <!-- 左边图片 -->
   	<div class="details">
   		<div class="details_content">
   			<div style="line-height: 30px;">Home &gt; 畅销单品 &gt; 刺绣兔子遮阳时装棒球帽</div>
   			<div class="img_x">
   				<ul>
   					<li><img src="image/TB219QUht4opuFjSZFLXXX8mXXa_!!2563625332.jpg" width="80px" height="100px"></img></li>
   					<li><img src="image/TB2qvfqcncCL1FjSZFPXXXZgpXa_!!2563625332.jpg" width="80px" height="100px"></img></li>
   					<li><img src="image/TB2RMD9gbXlpuFjSszfXXcSGXXa_!!2563625332.jpg" width="80px" height="100px"></img></li>
   					<li><img src="image/TB2RWINhC8mpuFjSZFMXXaxpVXa_!!2563625332.jpg" width="80px" height="100px"></img></li>
   					<li><img src="image/TB24e3vhEhnpuFjSZFpXXcpuXXa_!!2563625332.jpg" width="80px" height="100px"></img></li>
   				</ul>
   			</div>
   			<div class="img_d">
   				<img src="image/TB219QUht4opuFjSZFLXXX8mXXa_!!2563625332.jpg" height="600px"></img>
   			</div>
<!-- 右边详情 -->
   			<div class="float_left details_text">
   				<div style="height: 20px"></div>	
   				<h3 style="font-size: 25px;"><a href="jsp/test.jsp">刺绣兔子遮阳时装棒球帽</a></h3>
   				<p><span style="font-size: 22px">79元</span>&nbsp; <span style="color: #FF7F24">0.79</span>折</p>
   				<p><span style="font-weight: bold;">颜色:</span>Light blue/cream(淡蓝色/奶油色)</p>
   				<div class="color_img">
   					<img src="image/color.png"></img>
   					<img src="image/color2.png"></img>
   				</div>
   				<p><span style="font-weight: bold;">尺寸:</span>请以实际测量尺寸为准</p>
   				<div>
   					<label>S</label>    
	   				<input id="size_2" type="radio" name="size" value="1">
	   				<label>M</label> 
	   				<input id="size_3" type="radio" name="size" value="2">
	   				<label>L</label> 
	   				<input id="size_4" type="radio" name="size" value="3">
   				</div>
   				<div>
   					<div style="display: inline-block;line-height: 50px;margin-right: 10px;">
		   				数量:<select>
						  <option>1</option>
						  <option>2</option>
						  <option>3</option>
						  <option>4</option>
						  <option>5</option>
					</select>
					</div>
					<div class="shopping"><a href="#"><button class="shopping">加入购物车</button></a></div>
					<div class="wish">
							<span class="heart">&nbsp; &nbsp; &nbsp;</span>
							<span style="padding-top:-20px; display:inline-block;line-height:30px;">加入心愿清单</span><br/>
						<span style="color: #d26d51;">满200元免运费（港澳台除外）</span>
					</div>
<!-- 选项卡 -->
					<div class="tab" role="navigation">
						<div class="layui-tab layui-tab-card" style="height: 340px;">
						  <ul class="layui-tab-title">
						    <li class="layui-this">达配单品</li>
						    <li>商品详情</li>
						  </ul>
						  <div class="layui-tab-content">
						   <div class="layui-tab-item layui-show">
					<!-- 小图片 -->
								<div>
							    	<div style="float: left;">
							    		<img src="image/00192378-04.jpg" height="240px;"></img>
							    	</div>
							    	<div class="details_x">
								    	<h2>休闲字母破洞高腰牛仔裤</h2>
								    	<h2>249.00元</h2>
								    	<p style="line-height: 30px;"><span style="font-weight: bold;">Color</span> Light denim(浅牛仔蓝)</p>
								    	<p style="line-height: 30px;"><span style="font-weight: bold;">尺寸:</span>请以实际测量尺寸为准</p>
						   				<div style="line-height: 30px;">
						   					<label>S</label>    
							   				<input id="size_2" type="radio" name="size" value="1">
							   				<label>M</label> 
							   				<input id="size_3" type="radio" name="size" value="2">
							   				<label>L</label> 
							   				<input id="size_4" type="radio" name="size" value="3">
						   				</div>
						   				<div style="display: inline-block;float:left; line-height: 50px;margin: 10px;">
							   				<select>
												  <option>数量1</option>
												  <option>数量2</option>
												  <option>数量3</option>
												  <option>数量4</option>
												  <option>数量5</option>
											</select>
										</div>
										<div class="shopping_x">
											加入购物车
										</div>
							    	</div>
							    </div>
						    </div>
						    <div class="layui-tab-item">
						    	<p style="font-size: 12px;color: #999999">缎面飞行员夹克，正面花鸟图案刺绣装饰，条纹罗纹下摆，袖子上色块拼接，拉链前襟，插袋设置，时尚百搭。<br/>
						    	细节:<br/>
						    	- 面料：96%聚酯纤维，4%氨纶；内衬：100%聚酯纤维；装饰物：98%聚酯纤维，2%氨纶；刺绣：100%粘性纤维<br/>
						    	- 冷水手洗<br/>
						    	- BY FOREVER21<br/>
						    	<h3>商品真实尺寸</h3>
						    	<table width="100%" style="color: #999999;font-size: 13px;line-height: 20px;margin: 5px;">
						    		<tbody>	
						    			<tr style="border-bottom:1px dashed #999999;">
						    				<th>标准</th>
						    				<td>S</td>
						    				<td>M</td>
						    				<td>L</td>
						    			</tr>
						    			<tr style="border-bottom:1px dashed #999999;">
						    				<th>袖长</th>
						    				<td>68</td>
						    				<td>69</td>
						    				<td>71</td>
						    			</tr>
						    			<tr style="border-bottom:1px dashed #999999;">
						    				<th>袖窿长</th>
						    				<td>31</td>
						    				<td>32</td>
						    				<td>33</td>
						    			</tr>
						    			<tr style="border-bottom:1px dashed #999999;">
						    				<th>袖围</th>
						    				<td>38</td>
						    				<td>40</td>
						    				<td>42</td>
						    			</tr>
						    			<tr style="border-bottom:1px dashed #999999;">
						    				<th>胸围</th>
						    				<td>106</td>
						    				<td>112</td>
						    				<td>118</td>
						    			</tr>
						    			<tr style="border-bottom:1px dashed #999999;">
						    				<th>衣长</th>
						    				<td>59</td>
						    				<td>61</td>
						    				<td>62</td>
						    			</tr>
						    		</tbody>
						    	</table>
						    </div>
						    <div class="clear_float"></div>
						  </div>
						</div>
					</div>
   				</div>
   			</div>
   			<!-- 购买推荐 -->
   			<div>
   				<div style="width: 10%;text-align: center;font-size: 25px;float: left;">购买推荐</div>
   				<div style="width:90%;float: left;margin-top: 5px;"><hr style="height: 3px;"/></div>
   				<div class="clear_float"></div>
   			<!-- 购买推荐 图片 -->
   				<div style="margin-top: 10px;">	
   					<div class="Recommend_img">
   						<img src="image/tuijian01.jpg" width="200px;"/><br/>
   						[F21]字母全棉宽松落肩长袖卫衣<br/>
   						129.00元
   					</div>
   					<div class="Recommend_img">
   						<img src="image/tuijian02.jpg" width="200px;"/><br/>
   						摩登显瘦百搭高腰阔腿长裤<br/>
   						179.00元
   					</div>
   					<div class="Recommend_img">
   						<img src="image/tuijian03.jpg" width="200px;"/><br/>
   						摩登显瘦百搭高腰阔腿长裤<br/>
   						179.00元
   					</div>
   					<div class="Recommend_img">
   						<img src="image/tuijian04.jpg" width="200px;"/><br/>
   						摩登显瘦百搭高腰阔腿长裤<br/>
   						179.00元
   					</div>
   					<div class="Recommend_img">
   						<img src="image/tuijian05.jpg" width="200px;"/><br/>
   						摩登显瘦百搭高腰阔腿长裤<br/>
   						179.00元
   					</div>
   					<div class="clear_float"></div>
   				</div>
   			</div>
   		</div>
   	</div>
   	<script>
		//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
		//选项卡必用
		layui.use('element', function(){
		  var element = layui.element();
		});
		$(function(){
			
			$(".img_x>ul>li>img").on('click',function(){
				var str=$(this).attr("src");
				$(".img_d > img").attr("src",str).attr("width","570px");
			});
		});
</script>
  </body>
</html>
